<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style type="text/css">
			#em {
				width: 700px;
				height: 400px;
				display: flex;
			}

			.loading {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
				color: #ffffff;
				margin-top: 100px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.loader {
				border: 4px solid #f3f3f3;
				border-radius: 50%;
				border-top: 4px solid #4A99F6;
				width: 40px;
				height: 40px;
				-webkit-animation: spin 2s linear infinite;
				animation: spin 2s linear infinite;
			}

			.loading-text {
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 30px;

			}

			#partThreeD {
				color: #fff;
				position: relative;
				width: 300px;
				height: 300px;
				text-align: center;
				display: block;
				background-color: #000B17;
			}

			.partInfo {
				flex: 1;
				margin-left: 30px;
			}

			.partInfo-title {
				height: 26px;
				font-size: 20px;
				font-weight: bold;
				color: #262626;
				line-height: 26px;
				margin-bottom: 15px;
			}

			.partInfo-item {
				height: 30px;
				font-size: 16px;
				line-height: 30px;
			}

			.partInfo-item-key {
				color: #595959;
			}

			.partInfo-item-value {
				color: #262626;
			}
		</style>
	</head>
	<body>
		<div id="em">
			<div id="partThreeD">
				<div class="loading" v-if="!showLeft">
					<div class="loader"></div>
					<div class="loading-text" v-html="`3D模型正在加载中...(${percentage})`"></div>
				</div>
			</div>
			<div class="partInfo" v-if="partData.number">
				<div class="partInfo-title">
					<span v-html="partData.name"></span>
				</div>
				<div class="partInfo-item">
					<span class="partInfo-item-key">零件型号：</span>
					<span class="partInfo-item-value" v-html="partData.number"></span>
				</div>
				<div class="partInfo-item">
					<span class="partInfo-item-key">安装时间：</span>
					<span class="partInfo-item-value" v-html="partData.installTime"></span>
				</div>
				<div class="partInfo-item">
					<span class="partInfo-item-key">使用时间：</span>
					<span class="partInfo-item-value" v-html="partData.useTime+'天'"></span>
				</div>
				<div class="partInfo-item">
					<span class="partInfo-item-key">残余寿命：</span>
					<span class="partInfo-item-value" v-html="partData.remnantLife+'天'"></span>
				</div>
			</div>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<script src="./js/jquery-3.6.0.min.js"></script>
	<script src="./js/echarts.min.js"></script>
	<script type="text/javascript" src="js/uni.webview.1.5.2.js"></script>
	<script src="./js/three/three.js"></script>

	<script src="./js/three/loaders/STLLoader.js"></script>
	<script src="./js/three/CSS2DRenderer.js"></script>
	<script src="./js/three/Detector.js"></script>
	<script src="./js/three/controls/OrbitControls.js"></script>
	<script src="./js/three/libs/stats.min.js"></script>
	<script src="./js/md5.js"></script>
	<!-- 引入axios -->
	<script src="./js/axios.js"></script>

	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>



	<script>
		if (!Detector.webgl) Detector.addGetWebGLMessage();
		// var container = document.createElement( 'div' );
		var container;
		var times;
		var stats = new Stats();
		var raycaster = new THREE.Raycaster();
		var mouse = new THREE.Vector2();
		var group = new THREE.Group();
		var loader = new THREE.STLLoader();
		var daColor, previous = null,
			cnt = 0;
		var camera, cameraTarget, scene, renderer, labelRenderer;
		var partData;
		var width = $("#partThreeD").innerWidth();
		var height = $("#partThreeD").innerHeight();
		var unitId2 = getParamValue('unitId')
		var app = new Vue({
			el: '#em',
			data: {
				dataJson: [], //所有数据
				showDataJson: [], //筛洗出来可点击的数据
				leftList: [],
				unitId: '',
				typeId: '',
				showLeft: false,
				url: '',
				imgUrl: '',
				percentage: '0%',
				clickIndex: null,
				clickTimetype: false,
				canBack: 1,
				oldColor: '',
				overallIndex: '',
				currentMeas1: "",
				currentMeas2: "",
				measType: "",
				option: {},
				measDef: "加速度",
				measTitle: "",
				showTab: 0, //显示哪个tab
				unitDetail: '', //单体详情
				currentPart: "",
				partVisiable: false,
				loading: false,
				formData: {
					type: 1,
					roleIds: '',
					gaoxianId: '',
					name: ''
				},
				visiable: false,
				visiable2: false,
				loading2: false,
				formData2: {
					type: 1,
					roleIds: ''
				},
				id: "",
				partData: {},
				showPartRecords: false,
				tableData: []
			},
			created() {
				this.id = getParamValue('id')
				this.url = getParamValue('url')
				this.imgUrl = getParamValue('imgUrl')
				this.getPartInfo();
			},
			methods: {
				getPartInfo() {
					this.partData = {};
					let _this = this;
					let url = _this.url + '/backend-api/app/model/comp/get';
					let token = getParamValue('token')
					let header1 = getHeaderJson(token)
					let header2 = {
						"Content-Type": 'application/x-www-form-urlencoded'
					}
					let param = {};
					param.id = this.id
					axios({
						headers: Object.assign(header1, header2),
						method: 'get',
						url: url,
						params: param
					}).then(function(response) {
						if (response.data.code === 1000) {
							console.log(response.data);
							_this.partData = response.data.data;
							_this.setView(response.data.data.comp);
						}
					}).catch(function(error) {
						console.log(error)
					})

				},
				setColor(color) {
					return Number('0x' + color)
				},
				setView(data) {
					// 设置颜色，加载模型
					data.stlFile = this.imgUrl + data.stlFile;
					data.showColor = false;
					data.color = this.setColor(data.color);
					loaderFile(data).then((data) => {
						this.percentage = data.sum;
						this.showLeft = true;
					})
				},
			}
		})

		function scrollto(e) {
			// 获取父盒子（肯定有滚动条）
			var parent = document.getElementById('parent');
			parent.scrollTop = document.getElementById('child' + e).offsetTop - document.getElementById('child' + e)
				.offsetHeight
		}
		//分解url获得数据部分
		function getUrlParams() {
			var search = window.location.search;
			// 写入数据字典 
			var tmparray = search.substr(1, search.length).split("&");
			var paramsArray = new Array;
			if (tmparray != null) {
				for (var i = 0; i < tmparray.length; i++) {
					var reg = /[=|^==]/; // 用=进行拆分，但不包括== 
					var set1 = tmparray[i].replace(reg, '&');
					var tmpStr2 = set1.split('&');
					var array = new Array;
					array[tmpStr2[0]] = tmpStr2[1];
					paramsArray.push(array);
				}
			}
			// 将参数数组进行返回 
			return paramsArray;
		}

		// 根据参数名称获取参数值 
		function getParamValue(name) {
			var paramsArray = getUrlParams();
			if (paramsArray != null) {
				for (var i = 0; i < paramsArray.length; i++) {
					for (var j in paramsArray[i]) {
						if (j == name) {
							return paramsArray[i][j];
						}
					}
				}
			}
			return null;
		}

		init();

		function init() {
			container = document.getElementById('partThreeD')
			//创建场景
			scene = new THREE.Scene();
			scene.background = new THREE.Color(0x000B17);
			scene.fog = new THREE.Fog(0x000B17, 2, 15);
			// 灯光
			var light = new THREE.HemisphereLight(0xefefff, 0x111122, 1)
			scene.add(light);

			//添加3维坐标。正式环境需要隐藏
			// const axesHelper = new THREE.AxesHelper(1.5);
			// scene.add(axesHelper);
			//创建渲染器
			renderer = new THREE.WebGLRenderer({
				antialias: true,
				alpha: true
			});
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(width, height);
			renderer.gammaInput = true;
			renderer.gammaOutput = true;
			renderer.shadowMap.enabled = true;
			container.appendChild(renderer.domElement);
			//相机   透视投影照相机 /* 四个参数分别表示：多少度视角，相机的宽高比，最近距离，最远可视距离*/
			camera = new THREE.PerspectiveCamera(45, width / height, 0.005, 1500);
			camera.position.set(0, 0, 3);
			cameraTarget = new THREE.Vector3(0, 0, 0);
			//加入事件监听器,窗口自适应
			window.addEventListener('resize', onWindowResize, false);
			// renderer.domElement.addEventListener('mousedown', onMouseClick, false);
			// renderer.domElement.addEventListener('mousemove', onMouseMove);
		}

		function loaderFile(item) {
			return new Promise((resolve, reject) => {
				loader.load(item.stlFile, function(geometry) {
					var material = new THREE.MeshPhongMaterial({
						color: item.color,
						transparent: item.transparent == 1 ? true : false,
						opacity: item.opacity, // 定义物体的透明度。与 transparent 属性一起使用。该属性的赋值范围从 0 到 1。
						visible: true, //定义该材质是否可见。如果设置为 false,那么在场景中就看不到该物体。
						depthTest: true, //遮挡
					});
					partData = new THREE.Mesh(geometry, material);
					partData.position.set(item.pointX, item.pointY, item.pointZ);
					partData.rotation.set(item.rotaX, item.rotaY, item.rotaZ);
					partData.scale.set(item.scaleX, item.scaleY, item.scaleZ);
					partData.rotateStatus = item.rotateStatus;
					partData.rotateSpeed = item.rotateSpeed;
					partData.rotateShaft = item.rotateShaft;
					partData.measId = item.measId;
					partData.alarmColor = item.color;
					partData.name = item.name;
					scene.add(partData);
					let sum = 100 + '%'
					requestAnimationFrame(render);
					console.log(scene);
					resolve({
						type: true,
						sum: sum
					});
					reject(false);
				});
			})

		}

		function addShadowedLight(x, y, z, color, intensity) {
			var directionalLight = new THREE.DirectionalLight(color, intensity);
			directionalLight.position.set(x, y, z);
			scene.add(directionalLight);
			directionalLight.castShadow = true;
			var d = 1;
			directionalLight.shadow.camera.left = -d;
			directionalLight.shadow.camera.right = d;
			directionalLight.shadow.camera.top = d;
			directionalLight.shadow.camera.bottom = -d;
			directionalLight.shadow.camera.near = 1;
			directionalLight.shadow.camera.far = 4;
			directionalLight.shadow.mapSize.width = 1024;
			directionalLight.shadow.mapSize.height = 1024;
			directionalLight.shadow.bias = -0.002;
		}
		//可视窗口重置
		function onWindowResize() {
			//加入事件监听器,窗口自适应
			camera.aspect = width / height;
			camera.updateProjectionMatrix();
			renderer.setSize(width, height);
			labelRenderer.setSize(width, height);

		}


		//绘画渲染
		function render() {
			renderer.render(scene, camera);
			requestAnimationFrame(animation); //请求再次执行渲染函数animation
		}
		//动画库
		function animation() {
			if (partData.rotateStatus == 1) {
				switch (partData.rotateShaft) {
					case 'X':
						partData.rotateX(partData.rotateSpeed)
						break
					case 'Y':
						partData.rotateY(partData.rotateSpeed)
						break
					case 'Z':
						partData.rotateZ(partData.rotateSpeed)
						break
				}
			}
			render()
		}
		//轨道控制 镜头的移动
		var controlss = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
	</script>
</html>
